<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>棒棒糖</title>
	<style>
	* 画圆 */
#d1{
	width: 500px;
    height: 500px;
	/* 画圆：边框、背景色 */
	background-color: #ffaa00;
	/* 边框倒角条件：边框或者背景色 */
	border-radius: 50%;
	/* 微调定位 */
	positiontion:relative;
	left: 290px;
	top: 28px;
	}
#d2{
	width: 400px;
	height: 400px;
	/* 画圆：边框、背景色 */
	background-color: #00aa00;
	/* 边框倒角条件：边框或者背景色 */
	border-radius: 50%;
	/* 定位属性：元素直接定位到页面上 */
	/* 相对定位：相对于父级元素进行定位 网页xy轴*/
	position: relative;
	left: 50px;
	top: 50px;
	}
#d3{
	width: 300px;
	height: 300px;
	/* 画圆：边框、背景色 */
	background-color: #fff000;
	/* 边框倒角条件：边框或者背景色 */
	border-radius: 50%;
	left: 50px;
	top: 50px;
	}
	/* 棍子 */
p{
	width: 40px;
	height: 200px;
	background-color:#47ff56;
	/* 倾斜 转换属性：旋转值 */
	transform:rotate(-30deg);
	/* 微调定位 */
	position:relative;
	left: 10px;
	height: 10px;
	}
	</style>
</head>
<body>
     <!-- 画三个圆-->
	    <div id="d1">
	 	 <div id="d2">
	 	   <div id="d3"></div>
	 	</div>
	 	</div>
		<!-- 化棍 -->
	</body>
</html>